/**
 * @description Quota Management Component
 */

import React, { Component } from 'react'
import Container from '@/components/common/Container'
import { Tree, Tabs, Row, Col, Divider } from 'antd'
import { FormattedMessage } from 'react-intl'

const TreeNode = Tree.TreeNode
const TabPane = Tabs.TabPane

const breadcrumbConfig = [
  {
    path: '/dashboard',
    breadcrumbName: <FormattedMessage id="i18n_common_home_page" />
  },
  {
    path: '/service-define',
    breadcrumbName: <FormattedMessage id="i18n_menu_operation_label" />
  },
  {
    path: '',
    breadcrumbName: <FormattedMessage id="i18n_menu_quota_label" />
  }
]

export default class OrderMgmt extends Component {
  constructor(props) {
    super(props)
    this.state = {
      filterDropdownVisible: false,
      searchText: '',
      filtered: false,
      isLoading: false,
      // Cancel all subscriptions and asynchronous tasks Flag
      isMounted: false
    }
    this.treeSelect = this.treeSelect.bind(this)
    this.tabChange = this.tabChange.bind(this)
  }

  componentDidMount() {
    this.setState({ isMounted: true, isLoading: true })
    // Mock loading data
    setTimeout(() => {
      this.state.isMounted && this.setState({ isLoading: false })
    }, 5000)
  }
  componentWillUnmount() {
    // Cancel all subscriptions and asynchronous tasks
    this.setState({ isMounted: false })
  }
  treeSelect() {}
  tabChange() {}
  render() {
    return (
      <Container breadcrumb={breadcrumbConfig} className="p-3">
        <Row>
          <Col span={7}>
            <Tree
              showLine
              defaultExpandedKeys={['0-0-0']}
              onSelect={this.treeSelect}
            >
              <TreeNode title="parent 1" key="0-0">
                <TreeNode title="parent 1-0" key="0-0-0">
                  <TreeNode title="leaf" key="0-0-0-0" />
                  <TreeNode title="leaf" key="0-0-0-1" />
                  <TreeNode title="leaf" key="0-0-0-2" />
                </TreeNode>
                <TreeNode title="parent 1-1" key="0-0-1">
                  <TreeNode title="leaf" key="0-0-1-0" />
                </TreeNode>
                <TreeNode title="parent 1-2" key="0-0-2">
                  <TreeNode title="leaf" key="0-0-2-0" />
                  <TreeNode title="leaf" key="0-0-2-1" />
                </TreeNode>
              </TreeNode>
            </Tree>
          </Col>
          <Col span={1}>
            <Divider type="vertical" className="height-16" />
          </Col>
          <Col span={16}>
            <Tabs defaultActiveKey="1" onChange={this.tabChange}>
              <TabPane tab="Tab 1" key="1">
                Content of Tab Pane 1
              </TabPane>
              <TabPane tab="Tab 2" key="2">
                Content of Tab Pane 2
              </TabPane>
              <TabPane tab="Tab 3" key="3">
                Content of Tab Pane 3
              </TabPane>
            </Tabs>
          </Col>
        </Row>
      </Container>
    )
  }
}
